<template>
	<router-view></router-view>
	<el-main>
		<!-- <el-row :gutter="15">
			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
				<el-card shadow="hover" :body-style="{ padding: '0px' }" @click="click(item.url)">
					<div class="code-item">
						<div class="img" :style="{background: item.color}">
							<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`"><component :is="item.icon" /></el-icon>
						</div>
						<div class="title">
							<h2>{{item.title}}</h2>
							<h4>{{item.des}}</h4>
							<p><el-tag>{{item.ver}}</el-tag></p>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row> -->

		<!--  -->
		<sc-form ref="formref" :config="config" v-model="form" :loading="loading">
            <el-button type="primary" @click="save">保 存</el-button>
            <el-button @click="reset">重 置</el-button>
        </sc-form>
	</el-main>
</template>

<script>
	export default {
		name: 'autocode',
		data() {
			return {
				list: [
					{
						title: "CRUD v2",
						des: "配置型生成经典的增删改查列表",
						icon: "el-icon-finished",
						color: "#ccc",
						ver: "开发中",
						url: "/test/autocode/list_n"
					},
					{
						title: "FormDesigner",
						des: "表单设计器",
						icon: "el-icon-list",
						color: "#ccc",
						ver: "开发中",
						url: "/test/autocode/form"
					}
				],


				config: {},
				form: {},
				loading: false
			}
		},

		mounted(){
		  const config = {
            labelWidth: '130px',
            labelPosition: 'right',
            size: 'medium',
            formItems: [
                {
                    label: "ElementPlus",
                    component: "title",
                },
                {
                    label: "输入框",
                    name: "name",
                    value: "",
                    component: "input",
                    options: {
                        maxlength: "20",
                        placeholder: "Activity name",
                    },
                    rules: [
                        {required: true, message: "Please input Activity name", trigger: "blur"}
                    ],
                    requiredHandle: "$.required==true",
                },
                {
                    label: "栅格(12/24)",
                    name: "name2",
                    value: "",
                    component: "input",
                    span: 12,
                    options: {
                        placeholder: "span: 12",
                    }
                },
                {
                    label: "栅格(12/24)",
                    name: "name3",
                    value: "",
                    component: "input",
                    span: 12,
                    options: {
                        placeholder: "span: 12",
                    }
                },
                {
                    label: "选择器(多选)",
                    name: "select",
                    value: "",
                    component: "select",
                    span: 24,
                    options: {
                        remote: {
                            api: `${this.$CONFIG.API_URL}/system/dic/get`,
                            data: {name: 'a'}
                        },
                        multiple: true,
                        items:[
                            {
                                label: "选项1",
                                value: "1"
                            },
                            {
                                label: "选项2",
                                value: "2"
                            }
                        ]
                    },
                    rules: [
                        {required: true, message: "Please input Activity name", trigger: "change"}
                    ],
                    requiredHandle: "$.required==true",
                },
                {
                    label: "选择器(单选)",
                    name: "select2",
                    value: "",
                    component: "select",
                    span: 24,
                    options: {
                        remote: {
                            api: `${this.$CONFIG.API_URL}/system/dic/get`,
                            data: {name: 'b'}
                        },
                        items:[
                            {
                                label: "选项1",
                                value: "1"
                            },
                            {
                                label: "选项2",
                                value: "2"
                            }
                        ]
                    }
                },
                {
                    label: "级联选择器",
                    name: "cascader",
                    value: "",
                    component: "cascader",
                    span: 24,
                    options: {
                        items:[
                            {
                                label: "Guide",
                                value: "guide",
                                children: [
                                    {
                                        label: "Disciplines",
                                        value: "disciplines"
                                    },
                                    {
                                        label: "Consistency",
                                        value: "consistency"
                                    },
                                ]
                            },
                            {
                                label: "Resource",
                                value: "resource",
                                children: [
                                    {
                                        label: "Axure Components",
                                        value: "axure"
                                    },
                                    {
                                        label: "Sketch Templates",
                                        value: "sketch"
                                    },
                                    {
                                        label: "Design Documentation",
                                        value: "docs"
                                    }
                                ]
                            },
                            {
                                label: "Component",
                                value: "component"
                            },
                        ]
                    }
                },
                {
                    label: "多选框",
                    name: "checkbox",
                    component: "checkbox",
                    span: 24,
                    tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
                    options: {
                        items:[
                            {
                                label: "选项1",
                                name: "option1",
                                value: false
                            },
                            {
                                label: "选项2",
                                name: "option2",
                                value: false
                            }
                        ]
                    },
                    hideHandle: "$.required==true"
                },
                {
                    label: "多选框组",
                    name: "checkboxGroup",
                    value: [],
                    component: "checkboxGroup",
                    span: 24,
                    options: {
                        items:[
                            {
                                label: "选项1",
                                value: "option1"
                            },
                            {
                                label: "选项2",
                                value: "option2"
                            }
                        ]
                    },
                    hideHandle: "$.required==true"
                },
                {
                    label: "单选",
                    name: "radio",
                    value: "1",
                    component: "radio",
                    options: {
                        items:[
                            {
                                label: "选项1",
                                value: "1"
                            },
                            {
                                label: "选项2",
                                value: "2"
                            }
                        ]
                    },
                    hideHandle: "$.required==true"
                },
                {
                    label: "开关",
                    name: "required",
                    message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
                    value: false,
                    component: "switch",
                },
                {
                    label: "日期/时间",
                    name: "date",
                    value: "",
                    component: "date",
                    options: {
                        type: "datetime",
                        valueFormat: "YYYY-MM-DD HH:mm:ss",
                    },
                    rules: [
                        {required: true, message: "Please input Data", trigger: "change"}
                    ],
                },
                {
                    label: "滑块",
                    name: "slider",
                    value: 0,
                    component: "slider",
                    options: {
                        marks: {
                            0: '0°C',
                            8: '8°C',
                            37: '37°C'
                        }
                    }
                },
                {
                    label: "数值",
                    name: "number",
                    value: 0,
                    component: "number",
                },
                {
                    label: "颜色",
                    name: "color",
                    value: "",
                    component: "color",
                },
                {
                    label: "评分",
                    name: "rate",
                    value: 0,
                    component: "rate",
                },
                {
                    label: "SCUI扩展",
                    component: "title",
                },
                {
                    label: "表格选择器",
                    name: "tableselect",
                    value: {},
                    component: "tableselect",
                    span: 24,
                    options: {
                        apiObj: '$API.demo.page',
                        column: [
                            {
                                label: "ID",
                                prop: "id",
                                width:150
                            },
                            {
                                label: "姓名",
                                prop: "user"
                            }
                        ],
                        props: {
                            label: 'user',
                            value: 'id',
                            keyword: "keyword"
                        }
                    }
                },
                {
                    label: "上传",
                    component: "upload",
                    options: {
                        items:[
                            {
                                label: "图像1",
                                name: "img1",
                                value: ""
                            },
                            {
                                label: "图像2",
                                name: "img2",
                                value: ""
                            }
                        ]
                    }
                },
                {
                    label: "富文本",
                    name: "text",
                    value: "",
                    component: "editor",
                },
            ]
          };

        setTimeout(()=>{
            this.config = config
        },500)
		},

		methods: {
			click(url){
				this.$router.push({
					path: url
				});
			}
		}
	}
</script>

<style scoped>
	.el-card {margin-bottom: 15px;}
	.code-item {cursor: pointer;}
	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;}
	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
	.code-item .title {padding:15px;}
	.code-item .title h2 {font-size: 16px;}
	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
	.code-item .title p {margin-top: 15px;}
</style>
